<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商店</title>
<link rel="stylesheet" href="../style/footer.css" />
<link rel="stylesheet" href="../style/shoping.css" />
<link rel="stylesheet" href="../style/swiper-3.4.2.min.css" />
        <script src="../Resources/flexible.debug.js"></script>
		<script src="../Resources/flexible_css.debug.js"></script>
		<script src="../Resources/jquery-3.2.0.js"></script>
		<script src="../Resources/swiper/swiper.min.js"></script>
		<script src="../Resources/artTemplate.js"></script>
		<script src="../Resources/vue.js"></script>
		<script src="../Resources/swiper/swiper-3.4.2.jquery.min.js"></script>
		
	</head>
	<body>
		<header>
			<span>堆糖商店</span>
			<span><img class="vipp" src="../imges/qietu/vip.png"/></span>
			<span><img src="../imges/qietu/che.png"/></span>
		</header>
		
		<main id='main'>
			<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
						<img src="../imges/qietu/yizhi.png"/>
				</div>
				
				
				
			</div>

			<!--如果需要分页器-->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<!--<div class="swiper-button-prev"></div>-->
			<!--<div class="swiper-button-next"></div>-->

			<!-- 如果需要滚动条 -->
			<!--<div class="swiper-scrollbar"></div>-->
		
		</div>
		
		<section class="nav">
			<ul class="nav_one">
				
			</ul>
		</section>
		
		<section class="nav_two">
			<ul>
				<li>
					<h1 v-text='meau'></h1>
					<h4>{{size}}</h4>
					<img src="../imges/qietu/dog.png"/>
				</li>
				<li>
					<h1>{{font}}</h1>
					<h4>{{infos}}</h4>·
					<img src="../imges/qietu/water.png"/>
				</li>
				<li>
					<h1>{{text_one}}</h1>
					<h4>{{message}}</h4>
					<img src="../imges/qietu/open.png"/>
				</li>
			</ul>
			
		</section>
		<section class="nav_thee"></section>
		<section class="nav_two">
			<ul>
				<li>
					<h1 v-text='meau'></h1>
					<h4>{{size}}</h4>
					<img src="../imges/qietu/dog.png"/>
				</li>
				<li>
					<h1>{{font}}</h1>
					<h4>{{infos}}</h4>
					<img src="../imges/qietu/water.png"/>
				</li>
				<li>
					<h1>{{text_one}}</h1>
					<h4>{{message}}</h4>
					<img src="../imges/qietu/open.png"/>
				</li>
			</ul>
			
		</section>
		<section class="nav_thee"></section>
		<section class="nav_two">
			<ul>
				<li>
					<h1 v-text='meau'></h1>
					<h4>{{size}}</h4>
					<img src="../imges/qietu/dog.png"/>
				</li>
				<li>
					<h1>{{font}}</h1>
					<h4>{{infos}}</h4>
					<img src="../imges/qietu/water.png"/>
				</li>
				<li>
					<h1>{{text_one}}</h1>
					<h4>{{message}}</h4>
					<img src="../imges/qietu/open.png"/>
				</li>
			</ul>
			
		</section>
		<section class="nav_thee"></section>
		<section class="nav_two text">
			<ul>
				<li>
					<h1 v-text='meau'></h1>
					<h4>{{size}}</h4>
					<img src="../imges/qietu/dog.png"/>
				</li>
				<li>
					<h1>{{font}}</h1>
					<h4>{{infos}}</h4>
					<img src="../imges/qietu/water.png"/>
				</li>
				<li>
					<h1>{{text_one}}</h1>
					<h4>{{message}}</h4>
					<img src="../imges/qietu/open.png"/>
				</li>
			</ul>
			
		</section>
		
		
		
		</main>
		
		<footer class="footer_bottom">
        	
        	<dl id="index_html">
        		<dd>
        			<img class="get" src="../imges/qietu/siren/ccc.png"/>
        		</dd>
        		<dt>首页</dt>
        	</dl>
        	<dl id="task_html">
        		<dd>
        			<img class="get" src="../imges/qietu/eag.png"/>
        		</dd>
        		<dt>发现</dt>
        	</dl>
        	<dl id="shop_html">
        		<dd>
        			<img class="get" src="../imges/qietu/home.png"/>
        		</dd>
        		<dt>商店</dt>
        	</dl>
        	<dl id="my_html">
        		<dd>
        			<img class="get" src="../imges/qietu/opop.png"/>
        		</dd>
        		<dt>我</dt>
        	</dl>
        	
        	
        </footer>
        <script>
        
        
        $(".vipp").click(function(){
        	location.href = "huiyuanzhaomu.html"
        })
        
        
           $("#index_html").click(function(){
           	location.href = "../index.html"
           })
          $("#my_html").click(function(){
          	location.href = 'my.html'
          })
        $("#task_html").click(function(){
        	location.href = "task.html"
        })
        	var v = new Vue({
        		el:"#main",
        		data:{
        			message:"每周更新",
        			infos:"每周三更新",
        			text_one:"专栏",
        			font:"口碑排行",
        			size:"每周一，四更新",
        			meau:"新品速递"
        		}
        	})
        </script>
        <script>
        	var _url = '../ajax/shoping.json';
			$.get(_url, function(res) {
				console.log(res)
				var _html = '';
				$.each(res, function(i, n) {
					_html += '<li><a href="' + n.lianjie + '"><span><img src="' + n.imgs + '"/></span><span>' + n.font + '</span></a></li>'
				})
				$('.nav_one').append(_html);
			});
        	
        	var mySwiper = new Swiper('.swiper-container', {
				//				direction: 'vertical',
				loop: true,

				// 如果需要分页器
				pagination: '.swiper-pagination',

				// 如果需要前进后退按钮
				//				nextButton: '.swiper-button-next',
				//				prevButton: '.swiper-button-prev',

				// 如果需要滚动条
				//				scrollbar: '.swiper-scrollbar',
			})
        </script>
	</body>
</html>
